<template>
  <div>
    <a-modal v-model:visible="vdata.visible" title="等待支付" :footer="null" :width="300" @ok="handleClose">
      <div style="width:100%;margin-bottom:20px;text-align:center">
        <img v-if="vdata.apiRes.payDataType == 'codeImgUrl'" :src="vdata.apiRes.payData" alt="">
        <span v-else-if="vdata.apiRes.payDataType == 'payurl'">等待用户支付 
          <hr> 如浏览器未正确跳转请点击： <a :href="vdata.apiRes.payData" target="_blank">支付地址</a>
          <a-button size="small" class="copy-btn" @click="onCopy">复制链接</a-button>
        </span>
        <span v-else>等待用户支付,请稍后</span>
      </div>
      <p class="describe">
        <img v-show="vdata.wxApp" src="@/assets/payTestImg/wx_app.svg" alt=""><!-- 微信图标 -->
        <img v-show="vdata.aliApp" src="@/assets/payTestImg/ali_app.svg" alt=""><!-- 支付宝图标 -->
        <span>{{ vdata.payText }}</span>
      </p>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import ReconnectingWebSocket from 'reconnectingwebsocket'
import { $getWebSocketPrefix } from '@/api/manage'
import {ref, onMounted, reactive, getCurrentInstance} from 'vue'
import { message, Modal } from 'ant-design-vue'
import useClipboard from 'vue-clipboard3'
// 获取全局函数
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties
const { toClipboard } = useClipboard()
    const vdata =  reactive({
      visible: false,
      payText: '', // 二维码底部描述文字
      wxApp: false, // 微信二维码图片是否展示
      aliApp: false, // 支付宝二维码图片是否展示
      apiRes: {} as any, // 接口返回数据包
      payOrderWebSocket: null as any// 支付订单webSocket对象
    })
    const emit = defineEmits(['closeBarCode'])

  function  onCopy () {
      // $infoBox.message.success('复制成功')
      const Msg = vdata.apiRes.payData
      copy(Msg)
    }

const copy = async (Msg) => {
      try {
      	//复制
        await toClipboard(Msg)
        console.log(Msg,123)
        //下面可以设置复制成功的提示框等操作
        $infoBox.message.success('复制成功')
      } catch (e) {
      	//复制失败
        console.error(e)
      }
    }
defineExpose({showModal})
    // 二维码以及条码弹窗
  function  showModal (wayCode, apiRes) {
      // 关闭上一个webSocket监听
      if (vdata.payOrderWebSocket) {
        vdata.payOrderWebSocket.close()
      }
      vdata.apiRes = apiRes
      vdata.wxApp = false
      vdata.aliApp = false
      vdata.visible = true // 打开弹窗

      // 根据不同的支付方式，展示不同的信息
      vdata.payText = ''
      if (wayCode === 'WX_NATIVE' || wayCode === 'WX_JSAPI') { // 微信二维码
        vdata.wxApp = true
        vdata.payText = '请使用微信"扫一扫"扫码支付'
      } else if (wayCode === 'ALI_QR' || wayCode === 'ALI_JSAPI') { // 支付宝二维码
        vdata.aliApp = true
        vdata.payText = '请使用支付宝"扫一扫"扫码支付'
      } else if (wayCode === 'QR_CASHIER') { // 聚合支付二维码
        vdata.wxApp = true
        vdata.aliApp = true
        vdata.payText = '支持微信、支付宝扫码'
      }

      // 此处判断接口中返回的orderState，值为0，1 代表支付中，直接放行无需处理，2 成功 3 失败
      if (apiRes.orderState === 2 || apiRes.orderState === 3) {
        if (apiRes.orderState === 2) {
          handleClose()
          const succModal = Modal.success({
            title:'支付成功',
            content:'2秒后自动关闭'
          })
          // message.success('支付成功')
           setTimeout(() => { succModal.destroy() }, 2000)
          emit('closeBarCode') // 关闭条码框
        } else if (apiRes.orderState === 3) {
          
          handleClose()
          console.log(1111111) 
         Modal.error({
           title:'支付失败',
           content:`错误码：${apiRes.errCode}`
         })
        // message.error(`支付失败，${apiRes.errCode}`)
         emit('closeBarCode') // 关闭条码框
        }
        
        return
      }

      // h5 或者 wap
      if (wayCode === 'WX_H5' || wayCode === 'ALI_WAP') {
        vdata.payText = '请复制链接到手机端打开'
      } else {
      // 跳转到PC网站
        if (apiRes.payDataType === 'payurl') {
          window.open(apiRes.payData)
        }
      }

      // 如果上面未关闭条码框，则代表进入webScoket，那么先在此处关闭条码框
      emit('closeBarCode') // 关闭条码框
      // 监听响应结果
      vdata.payOrderWebSocket = new ReconnectingWebSocket($getWebSocketPrefix() + '/api/anon/ws/payOrder/' + apiRes.payOrderId + '/' + new Date().getTime())
      vdata.payOrderWebSocket.onopen = () => {}
      vdata.payOrderWebSocket.onmessage = (msgObject) => {
        const resMsgObject = JSON.parse(msgObject.data)
        if (resMsgObject.state === 2) {
          handleClose()
          // const succModal = $infoBox.modalSuccess('支付成功', '2s后自动关闭')
           const succModal = Modal.success({
            title:'支付成功',
            content:'2秒后自动关闭'
          })
          setTimeout(() => { succModal.destroy() }, 2000)
        } else {
         handleClose()
          // TODO 待更改 that.$infoBox.modalError('支付失败', <div><div>错误码：{ apiRes.errCode}</div>
          Modal.error({
           title:'支付失败',
           content:`错误码：${apiRes.errCode}`
         })
       // message.error(`支付失败，${apiRes.errCode}`)
        }
      }
    }
  function  handleClose () {
      if (vdata.payOrderWebSocket) {
        vdata.payOrderWebSocket.close()
      }
      vdata.visible = false
    }
</script>
<style lang="less" scoped>
.describe {
  img {
    width: 30px;
    height: 25px;
  }
}
</style>
